---
title: Compartilhe estado entre componentes Astro
description: Aprenda como compartilhar estado entre componentes Astro com Nano Stores.
i18nReady: true
type: recipe
---

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

:::tip
Usando componentes de um framework? Veja [como compartilhar estado entre Ilhas](/pt-br/recipes/sharing-state-islands/)!
:::

Enquanto constrói um website Astro, você pode precisar compartilhar estado entre componentes. Astro recomenda o uso de [Nano Stores](https://github.com/nanostores/nanostores) para armazenamento compartilhado no cliente.

## Receita

1. Instale Nano Stores:

  <PackageManagerTabs>
    <Fragment slot="npm">
    ```shell
    npm install nanostores
    ```
    </Fragment>
    <Fragment slot="pnpm">
    ```shell
    pnpm add nanostores
    ```
    </Fragment>
    <Fragment slot="yarn">
    ```shell
    yarn add nanostores
    ```
    </Fragment>
  </PackageManagerTabs>

2. Crie uma store. Nesse exemplo, a store irá rastrear se uma caixa de diálogo está aberta ou não:

  ```ts title="src/store.js"
  import { atom } from 'nanostores';

  export const estaAberto = atom(false);
  ```

3. Importe e use a store em uma tag `<script>` nos componentes que irão compartilhar estado.

Os componentes `Botao` e `Dialogo` a seguir usam o estado compartilhado `estaAberto` para controlar se uma `<div>` em particular está oculta ou visível:

  ```astro title="src/components/Botao.astro"
  <button id="abrirDialogo">Abrir</button>

  <script>
    import { estaAberto } from '../store.js';
    
    // Definir a store para true quando o botão for clicado
    function abrirDialogo() {
      estaAberto.set(true);
    }

    // Adicionar um listener de evento ao botão
    document.getElementById('abrirDialogo').addEventListener('click', abrirDialogo);
  </script>
  ```

  ```astro title="src/components/Dialogo.astro"
  <div id="dialogo" style="display: hidden">Olá mundo!</div>

  <script>
    import { estaAberto } from '../store.js';

    // Ouvir mudanças na store, e mostrar/ocultar a caixa de diálogo de acordo
    estaAberto.subscribe(open => {
      if (open) {
        document.getElementById('dialogo').style.display = 'block';
      } else {
        document.getElementById('dialogo').style.display = 'none';
      }
    })
  </script>
  ```

## Recursos

- [Nano Stores no NPM](https://www.npmjs.com/package/nanostores)
- [Documentação de Nano Stores para JS puro](https://github.com/nanostores/nanostores#vanilla-js)
